<template>
  <div class="menu-container" :style="{ width: $store.state.asideMenu.width }">
    <!-- :router="true" -->
    <el-menu
      unique-opened
      class="border-0"
      :collapse="$store.state.asideMenu.isExpand === false"
      :collapse-transition="false"
      :default-active="defaultActive"
      @select="handleSelect"
    >
      <template v-for="(item, index) in $store.state.menus" :key="index">
        <el-sub-menu
          v-if="item.child && item.child.length > 0"
          :index="item.name"
        >
          <template #title>
            <el-icon>
              <component :is="item.icon"></component>
            </el-icon>
            <span>{{ item.name }}</span>
          </template>

          <el-menu-item
            v-for="subItem in item.child"
            :key="subItem.frontpath"
            :index="subItem.frontpath"
          >
            <el-icon>
              <component :is="subItem.icon"></component>
            </el-icon>
            <span>{{ subItem.name }}</span>
          </el-menu-item>
        </el-sub-menu>

        <el-menu-item v-else :index="item.frontpath">
          <el-icon>
            <component :is="item.icon"></component>
          </el-icon>
          <span>{{ item.name }}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script setup>
import { computed } from "vue";
import { router } from "~/router";
import { useRoute } from "vue-router";

// #region 变量
const route = useRoute();
const defaultActive = computed(() => {
  return route.fullPath;
});
// #endregion

// #region 方法
const handleSelect = (url) => router.push(url);
// #endregion
</script>
<style scoped>
.menu-container {
  transition: all 0.4s;
  width: 250px;
  top: 64px;
  bottom: 0;
  left: 0;
  overflow-y: auto;
  overflow-x: hidden;
  @apply shadow-md fixed bg-light-50;
}

.menu-container::-webkit-scrollbar {
  width: 0;
}
</style>
